<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>小说</title>

    <!-- Bootstrap -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css"/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
		  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
		<![endif]-->
    <script src="/static/bootstrap/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</head>
<body style="background: url(/static/basefile/bg.jpg);background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;" data-spy="scroll" data-target="sidebarMenu">
<div class="modal" id="mark" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    {% for foo in mark %}
                        <li class="list-group-item"><a href="#{{ foo }}" name="catalogue">{{ foo }}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="sign" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="formmodel">
                <form method="post" action="{% url 'signin' %}">
                    <div class="form-group">
                        <label for="exampleInputEmail1">邮箱</label>
                        <input type="email" class="form-control" name="email" id="exampleInputEmail1"
                               aria-describedby="emailHelp">
                        <input type="hidden" name="next" value="{{ request.path }}"></input>
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                            else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" name="password" id="exampleInputPassword1">
                    </div>

                    <div class="form-row">
                        <div class="col-md-6">
                            <input type="text" name="yzm" class="form-control" placeholder="验证码">
                        </div>
                        <div class="col-md-6">
                            <button type="button" id="yzm" class="btn btn-info">获取验证码</button>
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-6">
                            <br>
                            <button type="submit" class="btn btn-primary">登录</button>

                        </div>
                        <div class="col-md-6">
                            <br>
                            <a type="button" href="formregister" class="btn btn-primary">注册</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="tips" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    <li class="list-group-item" id="modeltext"></li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="booklist" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="catalogue">
                <ul class="list-group">
                    {% block catalogue %}

                    {% endblock %}
                </ul>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <nav class="navbar navbar-fixed-top bg-warning">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar">asd</span>
                </button>
                <a class="navbar-brand" href="{% url 'home' %}">NiceNovel</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'hot' %}">热门</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'getcategory' category='classic' %}">经典</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='languages' %}">双语</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='science' %}">科幻</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='celebrity' %}">名人</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='children' %}">儿童</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='inspiring' %}">励志</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='religion' %}">宗教</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'getcategory' category='short' %}">短片</a></li>

                        </ul>
                    </li>
                </ul>

                <form class="navbar-form navbar-left" action="{% url 'inputsearchtest' %}" method="get">
                    <div class="form-group">
                        <input type="text" name="keyword" class="form-control" placeholder="请写入书名吧">
                    </div>
                    <button type="submit" class="btn btn-default">找书</button>
                </form>
                {#                <h5 class="card-title" id="word">word</h5>#}
                {#                    <p class="card-text" id="mean">mean</p>#}
                {#                <li><a id="word">反馈</a></li>#}
                <ul class="nav navbar-nav">
                    <li><a id="word">单词</a></li>
                    <li><a id="mean">解释</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">反馈</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">用户 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'collectionlist' %}">书架</a></li>
                            <li><a href="{% url 'wordlist' %}">单词本</a></li>
                            <li><a href="{% url 'recordlist' %}">浏览记录</a></li>
                            {% if userid == None %}
                                <li><a href="{% url 'formsignin' %}">登录</a></li>
                            {% else %}
                                <li><a href="{% url 'formsignin' %}">{{ userid }}</a></li>
                            {% endif %}
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="row">
        <br><br><br><br><br>
        <div class="col-md-2">

        </div>
        <div class="col-md-8" id="t1" style="background-color: #F7F2E8;">
            {% block content %}

            {% endblock %}

        </div>
        <div class="col-md-2">
            <div class="btn-group-vertical" data-spy="affix" data-offset="90">
                {#                <button type="button" id="book" class="btn btn-success">#}
                {#                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"#}
                {#                         class="bi bi-bookmark-star" viewBox="0 0 16 16">#}
                {#                        <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>#}
                {#                        <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>#}
                {#                    </svg>#}
                {#                    书签#}
                {#                </button>#}
                <button type="button" id="nice" class="btn btn-success">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                    {{ isnice }}
                </button>
                <button type="button" id="collection" class="btn btn-success">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-cart-plus" viewBox="0 0 16 16">
                        <path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9V5.5z"/>
                        <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                    </svg>
                    {{ iscol }}
                </button>

                <button type="button" id="list" class="btn btn-success">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-bar-chart-steps" viewBox="0 0 16 16">
                        <path d="M.5 0a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 .5 0zM2 1.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1z"/>
                    </svg>
                    目录
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#yzm').click(
            function () {
                $.ajax({
                    type: "POST",
                    url: "{% url 'getcode' %}",
                    data: {"email": $("#exampleInputEmail1").val()},
                    datatype: 'json',
                    success: function (data) {
                        $("#yzm").text(data.mes)
                    },
                    error: function () {
                        $("#yzm").text("发送失败")
                    }
                });
            });

        $('[name="catalogue"]').click(function (e) {
            $("html,body").animate({scrollTop: $("#" + e.target.val()).offset().top}, 1000);
            $.ajax({
                type: "get",
                url: '{% url "mark" %}',
                data: {"mark": e.target.val(), "bookid": "{{ bookid }}"},
                dataType: "json",
                success: function (mes) {
                    if (mes.status) {
                        $("#modeltext").text(mes.info);
                        $('#model').modal({
                            keyboard: false
                        });
                    } else {
                        $('#sign').modal({
                            keyboard: false
                        });
                    }
                }
            });
        });
        $("#nice").click(function () {
            $.ajax({
                type: "get",
                url: "{% url 'nice' %}",
                data: {"bookid": "{{ bookid }}"},
                dataType: "json",
                success: function (mes) {
                    if (mes.status) {
                        $("#nice").text(mes.data)
                        $("#modeltext").text('操作成功');
                        $('#tips').modal({
                            keyboard: false
                        });
                    } else {
                        $('#sign').modal({
                            keyboard: false
                        });
                    }
                }
            });
        });
        $("#list").click(function () {
            $("#booklist").modal({keyboard: false})
        });
        $("#book").click(function () {
            $("#mark").modal({keyboard: false})
        });
        $("#collection").click(function () {
            $.ajax({
                type: "get",
                url: "{% url 'col' %}",
                data: {"bookid": "{{bookid}}"},
                dataType: "json",
                success: function (mes) {
                    if (mes.status) {
                        $("#collection").text(mes.info)
                        $("#modeltext").text(mes.info);
                        $('#tips').modal({
                            keyboard: false
                        });
                    } else {
                        $('#sign').modal({
                            keyboard: false
                        });
                    }
                }
            });
        });
        $("#t1").mouseup(function (e) {
            var txt = window.getSelection();
            if (txt.toString().length > 1) {
                console.log(2)
                $.ajax({
                    type: "GET",
                    url: "{% url 'translate' %}",
                    data: {"word": txt.toString(), "bookid": "{{ bookid }}"},
                    dataType: "json",
                    success: function (mes) {
                        if (mes.status) {
                            if (mes.vip) {
                                $('#mean').empty();
                                $('#word').empty();   //清空resText里面的所有内容
                                $('#mean').html(mes["mean"]);
                                $("#word").html(mes["word"]);
                            } else {
                                window.location.replace("http://127.0.0.1:8000/pay/"+"{{ bookid }}");
                            }
                        } else {
                            $('#sign').modal({
                                keyboard: false
                            });
                        }
                    }
                });
            }
        });

    });
</script>
</body>
</html>
